
<template>
    <div class="account">
        <div class="w100 haed bbg pr">
            <img class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png"
                @click="back">
            <p class="fz37 cfff hpd tc">收支明细</p>
        </div>
        <div class="body plr">
            <div class="head">
                <div>
                    <p class="nt">1500</p>
                    <p>当前现金余额<span class="rmb">(元)</span></p>
                    <button @click="confirm" class="btn"> 提现 </button>
                </div>
                <div class="line"></div>
                <div>
                    <p>
                        累计收入<span class="rmb">(元)</span>:<span>1700元</span>
                    </p>
                    <p>
                        累计提现<span class="rmb">(元)</span>:<span>200元</span>
                    </p>
                </div>
            </div>
            <div class="main">
                <div class="main-head">
                    <p>收支明细</p>
                </div>
                <div class="list">
                    <div class="main-body" >
                        <div>
                            <p class="main-body-tit">XX车辆清洗、抛光打蜡服务</p>
                            <p class="main-body-foot">核销时间: <span>2022-10-10 11:09</span></p>
                        </div>
                        <div>
                            <p>+ 25.00</p>
                        </div>
                    </div>
              
                </div>

            </div>
        </div>

    </div>
</template>
  
<script>


export default {

    data() {
        return {

        }
    },
    mounted() {
           
    },
    methods: {
        confirm() {
            this.$router.push('/moneyWithdraw')
        },
        back() {
            this.$router.back();
        }
    }
}
</script>
  
<style scoped>
.account {
    background-color: #f7f7f7;
}

.rmb {
    margin: 0 20rem;
}

.body {
    /* width: 100%; */
    position: relative;
    bottom: 270rem;
    font-size: 23rem;
}

.head {
    display: flex;
    color: white;
    height: 230rem;
}

.head>div {
    width: 50%;
}

.head div:first-child {
    /* border-right: 1px solid #639ef6; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line {
    background: #E7E7E7;
    /*背景色为浅灰色*/
    width: 0.6rem !important;
    /*设置宽高*/
    height: 150rem;
}

.nt {
    font-weight: bold;
    font-size: 32rem;
    margin-bottom: 20rem;
}


.head div:last-child p {
    margin-left: 50rem;
    padding: 20rem 0;
}

.head div:last-child span {
    margin-left: 20rem;
}

.head button {
    background-color: rgb(251, 142, 11);
    width: 200rem;
    height: 50rem;
    border: none;
    padding: 10rem 20rem;
    border-radius: 75rem;
    margin-top: 40rem;
}

.btn {
    color: white;
    font-size: 23rem;
}

.main {
    background-color: white;
    border-radius: 15rem;
    padding: 20rem 30rem;
}

.main-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 7rem solid #f7f7f7;
    font-size: 30rem;

}

.main-head p {
    padding: 20rem 0;
}


.main-head img {
    width: 40rem;
    height: 40rem;
    align-self: center;
}

.main-head span {
    align-self: center;
    margin-left: 20rem;
}

.main-body {
    display: flex;
    justify-content: space-between;
    padding: 20rem 0 30rem 0;
    /* background-color: pink; */
    border-bottom: 3rem solid #f7f7f7;
}

.main-body-tit {
    padding-bottom: 20rem;
}

.main-body-foot {
    font-size: 20rem;
    color: #adadad;
}

.main-body div:last-child {
    align-self: center;
    color: #f00;
}

.main-body span {
    margin-left: 20rem;
}

.list div:last-child {
    border-bottom: none !important;
}</style>
